<template>
  <div class="wrap" :class="expandAll ? 'checked' : ''">
    <div class="text" ref="load">
      <label class="btn" @click="expand" v-if="needExport">全文</label>
      <div class="text-inner" v-html="word"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Expand',
  props: {
    word: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      expandAll: false,
      needExport: false,
    };
  },
  watch: {
    word: {
      handler(newVal) {
        //执行代码
        if (newVal) {
          this.$nextTick(() => {
            this.getLoadMore();
          });
        }
      },
      immediate: true,
    },
  },
  methods: {
    getLoadMore() {
      const el = this.$refs.load;
      if (el.clientHeight < el.scrollHeight) {
        this.needExport = true;
      }
    },
    expand() {
      this.expandAll = true;
    },
  },
};
</script>
<style lang="less" scoped>
.wrap {
  display: flex;
}
.checked {
  .text {
    max-height: none;
    .btn {
      display: none;
    }
  }
}
.text {
  max-height: 1.68rem;
  overflow: hidden;
  word-break: break-all;
  text-align: justify;
  line-height: 0.42rem;
  position: relative;
  font-size: 0.28rem;
  color: rgba(0, 0, 0, 0.84);
  &::before {
    content: '';
    float: right;
    width: 0; /*设置为0*/
    height: 100%;
    margin-bottom: -0.41rem;
  }
  .btn {
    float: right;
    clear: both;
    /* 本身的装饰样式*/
    height: 0.42rem;
    width: 0.6rem;
    text-align: center;
    font-size: 0.28rem;
    color: #4973f2;
    line-height: 0.42rem;
  }
}
</style>
